<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .timeStyle {
            border: 1px solid red;
            background-color: yellow;
        }
    
        button,div {
            margin-top: 20px;
        }
    </style>
    <script>
        let timeoutId;
        let intervalId;
        function getDate(){
            let today = new Date();
            let date = document.getElementById("date");
            date.innerHTML = "今天是"+today.getFullYear()+"年 "+today.getMonth()+1+"月 "+today.getDate()+"日 星期"+today.getDay()
        }
        function getTime(location="time",flag=false){
            let currentTime = new Date();
            let divTime = document.getElementById(location);
            divTime.innerHTML = `<span class='timeStyle'>${currentTime.getHours()}</span>&nbsp;:&nbsp;
                                <span class='timeStyle'>${currentTime.getMinutes()}</span>&nbsp;:&nbsp;
                                <span class='timeStyle'>${currentTime.getSeconds()}</span>&nbsp;&nbsp;
                                `;
            //console.log(true);
            if (flag) {
                timeoutId = setTimeout("getTime('time',true)", 1000);
            }
        }

        function init(){
            getDate();
            getTime("time", true);
            getTime("time1");
            intervalId = setInterval('getTime("time1")', 1000);
            let btn_Controller = document.getElementById("btn_Controller");
            btn_Controller.addEventListener("click",(event)=>{
                if (event.target.innerHTML == "停止") {
                    getTime();
                    clearTimeout(timeoutId);
                    event.target.innerHTML = "开始";
                }else{
                    timeoutId = setTimeout("getTime('time',true)", 1000);
                    event.target.innerHTML = "停止";
                }
            },false);

            let btn_Controller1 = document.getElementById("btn_Controller1");
            btn_Controller1.addEventListener("click", (event) => {
                if (event.target.innerHTML == "停止") {
                    clearInterval(intervalId);
                    event.target.innerHTML = "开始";
                } else {
                    intervalId = setInterval("getTime('time1')", 1000);
                    event.target.innerHTML = "停止";
                }
            }, false);
        }


        window.addEventListener("load", init, false);
    </script>
</head>
<body>
    setTimeout函数
    <div id="date"></div>
    <div id="time"></div>
    <button id="btn_Controller">停止</button>
    <br>
    setInterval函数
    <div id="time1"></div>
    <button id="btn_Controller1">停止</button>
</body>
</html>